

// form summary
var cache = {};

$("#form-wizard").bind("step_shown", function(event, data) {
    if (data.isLastStep) { // if this is the last step...then
        $("#summaryContainer").empty(); // empty the container holding the 
        $.each(data.activatedSteps, function(i, id) { // for each of the activated steps...do
            if (id === "summary")
                return; // if it is the summary page then just return
            cache[id] = $("#" + id).find(".form-group"); // else, find the div:s with class="input" and cache them with a key equal to the current step id
            cache[id].detach().appendTo('#summaryContainer').show().find(":input").removeAttr("disabled"); // detach the cached inputs and append them to the summary container, also show and enable them
        });
    } else if (data.previousStep === "summary") { // if we are movin back from the summary page
        $.each(cache, function(id, inputs) { // for each of the keys in the cache...do
            var i = inputs.detach().appendTo("#" + id).find(":input");  // put the input divs back into their normal step
            if (id === data.currentStep) { // (we are moving back from the summary page so...) if enable inputs on the current step
                i.removeAttr("disabled");
            } else { // disable the inputs on the rest of the steps
                i.attr("disabled", "disabled");
            }
        });
        cache = {}; // empty the cache again
    }
});

$(function() {

    $('#birthdate').datepicker();

    var rules = {};

    rules['photo'] = set_rules('photo', 'photo', 'valid_extensions[jpg,gif,png]');
    rules['first-name'] = set_rules('first-name', 'first name', 'trim|required|min_length[1]|maxlength[100]|xss_clean');
    rules['last-name'] = set_rules('last-name', 'last name', 'trim|required|min_length[1]|maxlength[100]|xss_clean');
    rules['birthdate'] = set_rules('birthdate', 'birthdate', 'trim|required|valid_slash_date|min_length[9]|max_length[10]|xss_clean');
    rules['gender'] = set_rules('gender', 'gender', 'trim|required|max_length[6]|xss_clean');

    rules['email'] = set_rules('email', 'email', 'trim|required|valid_email|min_length[1]|max_length[100]|xss_clean');
    rules['username'] = set_rules('username', 'username', 'trim|required|min_length[2]|max_length[100]|xss_clean');
    rules['password'] = set_rules('password', 'password', 'trim|required|min_length[6]|max_length[100]|xss_clean');
    rules['confirm-password'] = set_rules('confirm-password', 'confirm password', 'trim|required|matches[password]|min_length[6]|max_length[100]|xss_clean');

    rules['mobile'] = set_rules('mobile', 'mobile', 'trim|max_length[100]|xss_clean');
    rules['address'] = set_rules('address', 'address', 'trim|max_length[100]|xss_clean');
    rules['country'] = set_rules('country', 'country', 'trim|max_length[100]|xss_clean');
    rules['about'] = set_rules('about', 'about', 'trim|max_length[1000]|xss_clean');

//    alert( rules['text'].toSource() );

    // Validation
    $("#form-wizard").validate({
        errorElement: 'small',
        errorClass: 'help-block',
        rules: rules,
        errorPlacement: function(error, element) {
            element.parents('.input-size').append('<div class="clear-fix"></div>');
            element.parents('.input-size').append(error);
        },
        highlight: function(label) {
            $(label).closest('.form-group').removeClass('has-error has-success').addClass('has-error');
        },
        success: function(label) {
            label.addClass('valid').closest('.form-group').removeClass('has-error has-success').addClass('has-success');
        }
    });

    // form wizard
    $("#form-wizard").formwizard({
        formPluginEnabled: true,
        historyEnabled: true,
        validationEnabled: true,
        focusFirstInput: true,
        formOptions: {
            success: function(data) {
                $("#status").fadeTo(500, 1, function() {
                    $(this).html("You are now registered!").fadeTo(5000, 0);
                });
            },
            beforeSubmit: function(data) {
                alert('sdsdf');
                $("#data").html("data sent to the server: " + $.param(data));
            },
            dataType: 'json',
            resetForm: true
        },
        disableUIStyles: true
    });
    
    $('.wizard-step .step').click(function(){
        
        $(this).parent().children().removeClass('current');
        $(this).addClass('current');
        
        $("#form-wizard").formwizard("show", $(this).data('step'));
    });
    

});